<template>
    <div v-show="!showlist">暂无跟进记录</div>
    <PageHeader>
        <template #title>
            <div class="header_title1">
                <label>未完成</label>
                <label>({{ followupRecords.todo_count }} 条)</label>
                <Button type="primary" ghost @click="add">
                    <Icon type="md-add" />添加跟进
                </Button>
                <Button type="primary" ghost @click="complete">
                    <Icon type="md-checkmark" />完成
                </Button>
                <Button type="default" @click="refresh">
                    <Icon type="md-refresh" />刷新
                </Button>
            </div>
        </template>
        <template #content>
            <Table v-show="showtodolist" border ref="selection" :columns="columns_todo"
                :data="followupRecords.followup_records_todo" @on-selection-change="selection_change">
                <template #followup="{ row }">
                    {{ row.followup_time }} / {{ row.followup_employee_name }}
                </template>
                <template #creator="{ row }">
                    {{ row.created_at }} / {{ row.creator_employee_name }}
                </template>
                <template #contact_channel="{ row }">
                    {{ global_config.const_config_data.contact_channel(row.contact_channel) }}
                </template>
                <template #followup_phase="{ row }">
                    {{ global_config.const_config_data.followup_phase(row.followup_phase) }}
                </template>
                <template #action="{ row }">
                    <Button type="text" size="small" @click="edit(row.id)"><span style="color: blue">编辑</span></Button>
                    <Button type="text" size="small" @click="_delete(row.id)"><span
                            style="color: red">删除</span></Button>
                </template>
            </Table>
        </template>
    </PageHeader>

    <PageHeader>
        <template #title>
            <div class="header_title1">
                <label>已完成</label>
                <label>({{ followupRecords.done_count }} 条)</label>
            </div>
        </template>
        <template #content>
            <Table v-show="showdonelist" border ref="selection" :columns="columns_done"
                :data="followupRecords.followup_records_done">
                <template #followup="{ row }">
                    {{ row.followup_time }} / {{ row.followup_employee_name }}
                </template>
                <template #creator="{ row }">
                    {{ row.created_at }} / {{ row.creator_employee_name }}
                </template>
                <template #contact_channel="{ row }">
                    {{ global_config.const_config_data.contact_channel(row.contact_channel) }}
                </template>
                <template #followup_phase="{ row }">
                    {{ global_config.const_config_data.followup_phase(row.followup_phase) }}
                </template>
            </Table>
        </template>
    </PageHeader>

    <Modal v-model="show_followup_modal" title="添加跟进" @on-visible-change="visibleChange">
        <Form ref="refAddFollowupRecord" :model="form" :rules="validateRules">
            <Row :gutter="32">
                <Col :span="12">
                <FormItem label="安排时间：" prop="followup_time" label-width=96>
                    <DatePicker type="datetime" v-model="form.followup_time" style="width: 150px"></DatePicker>
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="跟进人：" prop="followup_employee_code" label-width=80>
                    <Select v-model="form.followup_employee_code">
                        <Option value="001">001</Option>
                        <Option value="002">002</Option>
                        <Option value="003">003</Option>
                    </Select>
                </FormItem>
                </Col>
            </Row>
            <Row :gutter="32">
                <Col :span="12">
                <FormItem label="联系人：" prop="contacts_id" label-width=96>
                    <Select v-model="form.contacts_id">
                        <Option :value="1">联系人0</Option>
                        <Option :value="2">联系人1</Option>
                        <Option :value="3">联系人2</Option>
                    </Select>
                </FormItem>
                </Col>
                <Col :span="12">
                <FormItem label="联系方式：" prop="contact_channel" label-width=96>
                    <Select v-model="form.contact_channel">
                        <Option :value="0">其他</Option>
                        <Option :value="1">电话</Option>
                        <Option :value="2">邮件</Option>
                        <Option :value="3">会面</Option>
                    </Select>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :span="24">
                <FormItem label="跟进阶段：" prop="followup_phase" label-width=96>
                    <Select v-model="form.followup_phase">
                        <Option value="S01">发送资料</Option>
                        <Option value="S02">见面沟通</Option>
                        <Option value="S03">确定方案、合同</Option>
                        <Option value="S04">续约电话</Option>
                    </Select>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :span="24">
                <FormItem label="备注：" prop="note" label-width=96>
                    <Input type="textarea" v-model="form.note"></Input>
                </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :span="24">
                <FormItem label="跟进状态：" prop="followup_status" label-width=96>
                    <Checkbox v-model="form.followup_status" :true-value="1" :false-value="0">已完成</Checkbox>
                </FormItem>
                </Col>
            </Row>
        </Form>
        <template #footer>
            <Button type="default" @click="cancel">关闭</Button>
            <Button type="primary" @click="submit">提交</Button>
        </template>
    </Modal>
</template>

<script>
import axios from 'axios'
import global_config from '@/data/config'

export default {
    setup() {
        return { global_config }
    },
    props: {
        companies_id: Number,
    },
    watch: {
        followupRecords(v) {
            this.showtodolist = v && v.followup_records_todo && v.followup_records_todo.length > 0
            this.showdonelist = v && v.followup_records_done && v.followup_records_done.length > 0
            this.showlist = this.showtodolist || this.showdonelist
        }
    },
    methods: {
        fetch_followup_records_list: function () {
            axios.get("http://localhost:3000/api/company/followuprecords/query_followup_records_by_companies_id?companies_id=" + this.companies_id)
                .then(resp => {
                    console.log(resp)
                    if (resp.data && resp.data.data) {
                        this.followupRecords = resp.data.data;
                    }else {
                        this.followupRecords = {}
                    }
                })
                .catch(error => {
                    this.$Message.error(error.response.data.error)
                })
        },
        update_followup_status_done: function () {
            axios
                .post("http://localhost:3000/api/company/followuprecords/batch_update_followup_status",
                    {
                        ids: this.selectionIds
                    },
                    {
                        'Content-Type': 'application/json; charset=utf-8'
                    }
                ).then(resp => {
                    if (resp.data && resp.data > 0) {
                        this.$Message.success('状态更新成功')
                        this.refresh(false)

                    }
                }).catch(error => {
                    this.$Message.error(error.response.data.error)
                })
        },
        refresh: function (showmessage = true) {
            if (showmessage) this.$Message.success('刷新成功');
            this.selectionIds = []
            this.fetch_followup_records_list()
        },
        complete: function () {
            if (this.selectionIds.length == 0) {
                this.$Message.warning('请至少勾选一个任务')

                return
            }
            this.update_followup_status_done()
        },
        selection_change: function (selection) {
            this.selectionIds = selection.map(x => x.id)
        },
        edit: function (id) {
            this.actionflag = 'edit'
            axios.get("http://localhost:3000/api/company/followuprecords/query_by_id?id=" + id)
                .then(resp => {
                    if (resp.data) {
                        this.form = resp.data;
                        this.form.creator_id = this.form.creator_id || '202307001'
                        this.show_followup_modal = true
                    }
                })
                .catch(error => {
                    this.$Message.error(error.response.data.error)
                })
        },
        _delete: function (id) {
            if (confirm("确认要删除该跟进记录吗？")) {
                axios
                .post("http://localhost:3000/api/company/followuprecords/delete",
                    {
                        id: id
                    },
                    {
                        'Content-Type': 'application/json; charset=utf-8'
                    }
                ).then(resp => {
                    if (resp.data && resp.data > 0) {
                        this.$Message.success('删除成功')

                    }
                }).catch(error => {
                    this.$Message.error(error.response.data.error)
                }).finally(() => {
                    this.refresh(false)
                })
            }
        },
        add: function () {
            this.actionflag = 'add'
            this.form = {
                companies_id: this.companies_id,
                creator_id: '202307001', // todo current_user_id
                followup_status: 0
            }
            this.show_followup_modal = true
        },
        cancel: function () {
            this.show_followup_modal = false
        },
        visibleChange: function (value) {
            if (!value) this.$refs['refAddFollowupRecord'].resetFields();
        },
        submit: function () {
            this.$refs['refAddFollowupRecord'].validate(valid => {
                if (valid) {
                    if (this.actionflag == 'add') {
                        axios
                            .post("http://localhost:3000/api/company/followuprecords/add_followup_record",
                                this.form,
                                {
                                    'Content-Type': 'application/json; charset=utf-8'
                                }
                            ).then(resp => {
                                if (resp.data) {
                                    this.$Message.success('新增成功')
                                    this.show_followup_modal = false
                                    this.form = {
                                        companies_id: this.companies_id,
                                        creator_id: '202307001', // todo current_user_id
                                        followup_status: 0
                                    }
                                    this.refresh(false)

                                }
                            }).catch(error => {
                                this.$Message.error(error.response.data.error)
                            })
                    } else if (this.actionflag == 'edit') {
                        axios
                            .post("http://localhost:3000/api/company/followuprecords/update",
                                this.form,
                                {
                                    'Content-Type': 'application/json; charset=utf-8'
                                }
                            ).then(resp => {
                                if (resp.data) {
                                    this.$Message.success('更新成功')
                                    this.show_followup_modal = false
                                    this.refresh(false)
                                }
                            }).catch(error => {
                                this.$Message.error(error.response.data.error)
                            })
                    }
                } else {
                    this.$Message.error('验证失败!');
                }
            })
        }
    },
    created() {
        this.fetch_followup_records_list()
    },
    data() {
        return {
            columns_todo: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '安排时间/人',
                    slot: 'followup'
                },
                {
                    title: '创建时间/人',
                    slot: 'creator'
                },
                {
                    title: '联系人',
                    key: 'contact_name'
                },
                {
                    title: '联系方式',
                    slot: 'contact_channel'
                },
                {
                    title: '阶段',
                    slot: 'followup_phase'
                },
                {
                    title: '备注',
                    key: 'note'
                },
                {
                    title: '操作',
                    slot: 'action'
                },
            ],
            columns_done: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '安排时间/人',
                    slot: 'followup'
                },
                {
                    title: '创建时间/人',
                    slot: 'creator'
                },
                {
                    title: '联系人',
                    key: 'contact_name'
                },
                {
                    title: '联系方式',
                    slot: 'contact_channel'
                },
                {
                    title: '阶段',
                    slot: 'followup_phase'
                },
                {
                    title: '备注',
                    key: 'note'
                }
            ],
            followupRecords: {},
            showlist: false,
            showtodolist: false,
            showdonelist: false,
            selectionIds: [],
            show_followup_modal: false,
            form: {
                companies_id: this.companies_id,
                creator_id: '202307001', // todo current_user_id
                followup_status: 0
            },
            actionflag: 'add',
            validateRules: {
                followup_time: [
                    {
                        required: true,
                        type: 'date',
                        message: '安排时间不能为空',
                        trigger: 'change'
                    }
                ],
                followup_employee_code: [
                    {
                        required: true,
                        message: "跟进人不能为空",
                        trigger: 'change'
                    }
                ],
                contacts_id: [
                    {
                        required: true,
                        type: 'number',
                        message: "联系人不能为空",
                        trigger: 'change'
                    }
                ],
                contact_channel: [
                    {
                        required: true,
                        type: 'number',
                        message: "联系方式不能为空",
                        trigger: 'change'
                    }
                ],
                followup_phase: [
                    {
                        required: true,
                        message: "跟进阶段不能为空",
                        trigger: 'change'
                    }
                ],
                note:[
                    {
                        max: 200,
                        message: '备注长度不能超过200',
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    components: {
        // FollowupRecordList
    },
}

</script>

<style>
.header_title1 {
    font-size: medium;
}

.color_blue {
    color: blue;
}

.header_title1>label {
    margin: 5px;
}

.bold {
    font-weight: bold;
}

.header_title1>button {
    margin-left: 15px;
    font-weight: bold;
}
</style>